<template>
  <el-row>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ name: 'dashboard' }">控制台</el-breadcrumb-item>
      <el-breadcrumb-item>定制服务管理</el-breadcrumb-item>
    </el-breadcrumb>

    <blank />

    <el-row>
      <el-col :span="24">
        <el-table
          :data="users"
          border
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>

          <el-table-column prop="OpenId" label="OpenId" show-overflow-tooltip>
          </el-table-column>

          <el-table-column label="头像" show-overflow-tooltip align="center">
            <template scope="scope">
              <img :src="scope.row.AvatarUrl" class="avatar" />
            </template>
          </el-table-column>

          <el-table-column prop="NickName" label="昵称" show-overflow-tooltip>
          </el-table-column>

          <el-table-column prop="Gender" label="性别" show-overflow-tooltip>
          </el-table-column>

          <el-table-column prop="Province" label="省份" show-overflow-tooltip>
          </el-table-column>

          <el-table-column prop="City" label="城市" show-overflow-tooltip>
          </el-table-column>

          <el-table-column prop="Country" label="国家" show-overflow-tooltip>
          </el-table-column>          

        </el-table>
      </el-col>
    </el-row>

    <blank />

    <el-row>
      <el-col :span="24">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
import blank from '@/components/Blank'
import { Message } from 'element-ui'
import ax, { errhandler } from '@/api/_axios-config'
import * as apis from '@/api/_api'

export default {
  name: 'vip',
  data () {
    return {
      currentPage: 1,
      pageSize: 20,
      total: 100,
      users: []
    }
  },
  methods: {
    handleSizeChange (size) {
      this.pageSize = size
      this.getUserInfo(this.pageSize, this.currentPage)
    },
    handleCurrentChange (page) {
      this.currentPage = page
      this.getUserInfo(this.pageSize, this.currentPage)
    },
    getUserInfo (pageSize, page) {
      ax.get(apis.VIPUSERS, { params: { pageSize: pageSize, page: page } }).then(
        response => {
          let result = response.data
          if (result.BoolStatus) {
            this.users = result.Data.data
            this.total = result.Data.totalCount
          } else {
            Message.info('未获取用户信息')
          }
        }
      ).catch(
        err => {
          errhandler(err)
        }
      )
    }
  },
  components: { blank },
  created: function () {
    this.getUserInfo(this.pageSize, this.currentPage)
  }
}
</script>

<style lang="stylus">
  .avatar
    width 100px
    height 100px
</style>
